<script setup>
import { ref, computed } from 'vue';
import { ElMessage,ElMessageBox } from 'element-plus';
import { interfaceTypeListService, interfaceTypeAddService, interfaceTypeUpdateService, interfaceTypeDeleteService } from '@/api/biApi/interface_types.js';

// 接口类型列表数据模型
const interfaceTypes = ref([]);
const filteredInterfaceTypes = ref([]);
const interfaceTypeName = ref('');

// 分页条数据模型
const pageNum = ref(1); // 当前页
const total = ref(0); // 总条数
const pageSize = ref(3); // 每页条数

// 控制抽屉是否显示
const visibleDrawer = ref(false);
const isEdit = ref(false); // 控制是否为编辑状态

// 添加表单数据模型
const interfaceTypeModel = ref({
  id: null,
  identifier: '',
  type: ''
});

const rules = {
  identifier: [{ required: true, message: '请输入接口标识', trigger: 'blur' }],
  type: [{ required: true, message: '请输入接口类型', trigger: 'blur' }]
};

// 打开添加接口类型表单
const openAddInterfaceType = () => {
  isEdit.value = false;
  interfaceTypeModel.value = {
    id: null,
    identifier: '',
    type: ''
  };
  visibleDrawer.value = true;
};

// 获取接口类型列表数据
const interfaceTypeList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    name: interfaceTypeName.value ? interfaceTypeName.value : null
  };
  let result = await interfaceTypeListService(params);

  // 渲染视图
  interfaceTypes.value = result.data.map(item => ({
    id: item.id,
    identifier: item.identifier,
    type: item.type
  }));
  filteredInterfaceTypes.value = interfaceTypes.value;
  total.value = filteredInterfaceTypes.value.length;
};

// 计算当前页显示的数据
const paginatedInterfaceTypes = computed(() => {
  const start = (pageNum.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredInterfaceTypes.value.slice(start, end);
});

// 当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  interfaceTypeList();
};

// 当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num;
  interfaceTypeList();
};

// 过滤接口类型列表
const filterInterfaceTypes = () => {
  const query = interfaceTypeName.value.toLowerCase();
  filteredInterfaceTypes.value = interfaceTypes.value.filter(interfaceType => 
    interfaceType.identifier.toLowerCase().includes(query) || 
    interfaceType.type.toLowerCase().includes(query)
  );
  total.value = filteredInterfaceTypes.value.length;
};

// 重置搜索
const resetSearch = () => {
  interfaceTypeName.value = '';
  filterInterfaceTypes();
};

// 添加接口类型
const addInterfaceType = async () => {
  let result;
  if (isEdit.value) {
    result = await interfaceTypeUpdateService(interfaceTypeModel.value);
    ElMessage.success(result.msg ? result.msg : '修改成功');
  } else {
    result = await interfaceTypeAddService(interfaceTypeModel.value);
    ElMessage.success(result.msg ? result.msg : '添加成功');
  }
  visibleDrawer.value = false;
  interfaceTypeList();
};

// 编辑接口类型
const editInterfaceType = (interfaceType) => {
  isEdit.value = true;
  interfaceTypeModel.value = { ...interfaceType };
  visibleDrawer.value = true;
};

// 删除接口类型
const deleteInterfaceType = async (interfaceType) => {
    try {
    await ElMessageBox.confirm(
      `此操作可能会影响项目信息, 是否继续?`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );
  await interfaceTypeDeleteService(interfaceType.id);
  ElMessage.success('删除成功');
  interfaceTypeList();
} catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败');
    }
  }
};

// 初始化接口类型列表
interfaceTypeList();
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>基本接口类型信息管理</span>
        <div class="extra">
          <el-button type="primary" @click="openAddInterfaceType">添加接口类型</el-button>
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="接口类型或标识：">
        <el-input placeholder="请输入接口类型或标识" v-model="interfaceTypeName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="filterInterfaceTypes">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 接口类型信息列表 -->
    <el-table :data="paginatedInterfaceTypes" style="width: 100%">
      <el-table-column prop="identifier" label="接口标识" width="300" show-overflow-tooltip></el-table-column>
      <el-table-column prop="type" label="接口类型" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button @click="editInterfaceType(scope.row)" type="primary" size="small">修改</el-button>
          <el-button @click="deleteInterfaceType(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" :title="isEdit ? '修改接口类型' : '添加接口类型'" direction="rtl" size="50%">
      <!-- 添加接口类型表单 -->
      <el-form :model="interfaceTypeModel" :rules="rules" label-width="100px">
        <el-form-item label="接口标识" prop="identifier">
          <el-input v-model="interfaceTypeModel.identifier" placeholder="请输入接口标识"></el-input>
        </el-form-item>
        <el-form-item label="接口类型" prop="type">
          <el-input v-model="interfaceTypeModel.type" placeholder="请输入接口类型"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addInterfaceType">{{ isEdit ? '修改' : '添加' }}</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>